interface post {
  id: number;
  msg: string;
}

const Blog = ({ posts }: { posts: post[] }) => {
  return (
    <>
      <ol>
        {posts.map((p) => {
          return <li key={p.id}>{`post ID: ${p.id} | msg: ${p.msg}`}</li>;
        })}
      </ol>
    </>
  );
};

export async function getStaticProps() {
  let postList: post[] = [];

  let getPostListData = new Promise<post[]>((resolve) => {
    let postList: post[] = [];
    setTimeout(() => {
      for (let i = 0; i < 15; i++) {
        postList.push({
          id: i,
          msg: `This is post ${i}`,
        });
        // console.log(`This is post ${i}`)
      }
      resolve(postList);
    }, 1000);
  });

  postList = await getPostListData;

  return {
    props: {
      posts: postList,
    },
  };
}

export default Blog;
